<script setup lang="ts">
import { router } from '@/router';

const props = defineProps({
    name: String
});

const back = () => {
    console.log("我要准备返回了嘛？")
    router.back();
}

</script>

<template>
    <div class="container-icon">
        <div class="icon">
            <van-icon @click="back" name="arrow-left" size="32" />
        </div>
        <div class="center">
            <p style="margin: 0%; font-size: 15px;">{{ props.name }}</p>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container-icon {
    display: flex;
    background-color: white;
    flex-basis: 50px;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px rgba(0, 0, 0, 0.13) solid;
    width: 100%;
    position: relative; /* 为子元素的绝对定位提供参考 */
    .icon {
        position: absolute; /* 绝对定位 */
        left: 16px; /* 距离左侧 16px */
        display: flex;
        align-items: center;
    }
    .center {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
}
</style>